3.1 任务描述

前置任务：C4-002

业务模块：主视图界面

创建页面布局

任务类型：按步骤操作

3.2 详细实现步骤

系统主要功能分为“明细”、“统计”、“我的”等三个部分，因此需要为每个功能设计页面。

修改主布局文件

在res/layout/activity_main.xml文件中，添加ViewPager组件，实现页面的管理。ViewPager组件是一个容器，允许左右滑动页面，从而实现在不同页面之间的翻转，经常和Fragment等一起使用。

<?xml version="1.0" encoding="utf-8"?>
<android.support.constraint.ConstraintLayout xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:id="@+id/container"
    android:layout_width="match_parent"
    android:layout_height="match_parent"
    tools:context="cn.edu.bistu.cs.se.accountbook.MainActivity">

    <android.support.v4.view.ViewPager
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_above="@+id/navigation"
        >
    </android.support.v4.view.ViewPager>

    <android.support.design.widget.BottomNavigationView
        android:id="@+id/navigation"
        android:layout_width="0dp"
        android:layout_height="wrap_content"
        android:layout_marginEnd="0dp"
        android:layout_marginStart="0dp"
        android:background="?android:attr/windowBackground"
        app:layout_constraintBottom_toBottomOf="parent"
        app:layout_constraintLeft_toLeftOf="parent"
        app:layout_constraintRight_toRightOf="parent"
        app:menu="@menu/navigation" />

</android.support.constraint.ConstraintLayout>

创建

图 8 创建MyPagerAdapter类

可以看到，Android Studio为我们生成了MyPagerAdapter类，但是类为空的，我们需要重载其方法，并添加相应数据成员。在类名上单击右键，然后在弹出的菜单中选择“generate…”，如下所示。也可以依次单击菜单“Code”、“generate…”。

图 9 在弹出的菜单中选择“generate…”

在弹出的菜单中选择“implement methods…”，也可以依次单击菜单“Code”、“Implement methods…”。Android Studio弹出“Select Methods to Implement”对话框，如下所示，将两个方法全部选上，然后单击“OK”按钮。

图 10 实现方法

同上类似，再次在类名上单击右键，依次选择菜单“generate…”、“Constructor”，生成构造函数。

然后再次在类名上单击右键，依次选择菜单“generate…”、“Overide methods…”，也可以依次单击菜单“Code”、““Overide methods…”，Android Studio弹出“Select Methods to Override。Implement”对话框，如下所示，这里选择重载“instantiateItem”、“destroyItem”两个方法，如下图所示。

图 11 重载方法

然后为该类添加数据成员，并修改代码，修改完后的代码如下所示：

package cn.edu.bistu.cs.se.accountbook;

import android.support.v4.view.PagerAdapter;
import android.view.View;
import android.view.ViewGroup;

import java.util.List;

/**
 * Created by hbs on 2017-11-27.
 */

public class MyPagerAdapter extends PagerAdapter {

    private List<View> viewList = null;
    public MyPagerAdapter(List<View> viewList) {
        this.viewList = viewList;
    }

    @Override
    public int getCount() {
        return viewList.size();
    }

    @Override
    public Object instantiateItem(ViewGroup container, int position) {
        container.addView(viewList.get(position));
        return viewList.get(position);
    }

    @Override
    public void destroyItem(ViewGroup container, int position, Object object) {
        container.removeView(viewList.get(position));
    }


    @Override
    public boolean isViewFromObject(View view, Object object) {
        return view == object;
    }
}

3.3 添加布局文件

由于“个人记账本”主要有三个功能模块，这里为每个功能模块添加一个布局文件。在res/layout文件夹中添加layout_details.xml、layout_statistics.xml、layout_own.xml布局文件，分别对应“明细”、“统计”、“我的”等三个功能部分。文件结构如下所示：

图 12 文件结构

简单起见，目前这三个布局文件都可以为空，以layout_details.xml为例，代码如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

</RelativeLayout>

程序运行界面：

图 13 底部导航栏程序运行界面

3.4 根据功能修改布局文件

3.4.1 修改“明细”布局文件

“明细”功能主要包括增加收入、增加支出等，在增加收入和支出时，需要输入类型和金额等；并且将收入和支出的明细显示出来，这里使用ListView控件进行显示。

根据上述功能，设计界面如下：

图 14 “明细”界面

设计布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">


    <GridLayout
        android:id="@+id/grid"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:columnCount="3"
        android:orientation="horizontal">


        <TextView android:text="收入类型"

            />

        <Spinner
            android:id="@+id/spinnerEarningType"
            android:layout_height="wrap_content"
            android:layout_gravity="fill_horizontal"
            android:layout_columnWeight="2"
            />


        <Button
            android:id="@+id/buttonNewEarning"
            android:layout_gravity="fill"
            android:layout_rowSpan="2"
            android:layout_columnWeight="1"
            android:text="新收入" />


        <TextView android:text="金额" />

        <EditText
            android:id="@+id/txtEarningAmount"
            android:layout_gravity="fill_horizontal"  />


        <!--分割条-->
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_columnSpan="3"
            android:background="#cbcbcb" />

        <TextView android:text="支出类型" />

        <Spinner
            android:id="@+id/spinnerExpenditureType"
            android:layout_height="wrap_content"
            android:layout_gravity="fill_horizontal" />

        <Button
            android:id="@+id/buttonNewExpenditure"
            android:layout_gravity="fill"
            android:layout_rowSpan="2"

            android:text="新支出" />

        <TextView android:text="金额" />

        <EditText
            android:id="@+id/txtExpenditureAmount"
            android:layout_gravity="fill_horizontal" />



        <!--分割条-->
        <View
            android:layout_width="match_parent"
            android:layout_height="1px"
            android:layout_columnSpan="3"
            android:background="#cbcbcb" />


    </GridLayout>

    <LinearLayout
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:orientation="horizontal"
        android:layout_below="@id/grid"
        >

        <ListView
            android:id="@+id/ListEarnings"
            android:layout_height="match_parent"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_gravity="fill_vertical"
            android:layout_columnWeight="1" >

        </ListView>
        <ListView
            android:id="@+id/ListExpenditures"
            android:layout_width="0dp"
            android:layout_weight="1"
            android:layout_height="match_parent"
            android:layout_gravity="fill_vertical"
            android:layout_columnWeight="1" >

        </ListView>

    </LinearLayout>



</RelativeLayout>

3.4.2 修改“统计”布局文件

“统计”功能主要包括显示特定日期下的收入和支出金额。界面上能够让用户选择日期，并进行查询。

根据以上功能，设计布局文件如下：

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">



    <EditText
        android:id="@+id/editTextDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentStart="true"
        android:layout_alignParentTop="true"
        android:ems="10"
        android:inputType="date" />

    <Button
        android:id="@+id/buttonDate"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentTop="true"
        android:layout_toEndOf="@+id/editTextDate"
        android:text="日期" />

    <Button
        android:id="@+id/buttonQuery"
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:layout_alignParentEnd="true"
        android:layout_alignParentTop="true"
        android:text="查询" />

    <TableLayout
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:layout_below="@+id/buttonDate"
        android:layout_toStartOf="@+id/buttonDate">

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView android:text=""
                android:id="@+id/textviewEarnings"
                />

        </TableRow>

        <TableRow
            android:layout_width="match_parent"
            android:layout_height="match_parent" >
            <TextView android:text=""
                android:id="@+id/textviewExpenditures"
                />
        </TableRow>

    </TableLayout>

</RelativeLayout>

3.4.3 修改“我的”布局文件

“我的”界面功能主要包括显示个人资产情况，界面比较简单。

<?xml version="1.0" encoding="utf-8"?>
<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">
    <TextView
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/textviewOwn"
        />

</RelativeLayout>